<template>
  <el-drawer
    :title="detailType[type].title"
    size="45%"
    :visible.sync="drawer"
    :close-on-press-escape="false"
  >
    <div class="main_table">
      <el-table :data="list" show-summary  v-loading="loadingDialig">
        <el-table-column prop="document_name" label="类型"></el-table-column>
        <el-table-column
          :prop="detailType[type].num"
          :label="`${detailType[type].header}数量`"
        ></el-table-column>
        <el-table-column
          :label="`${detailType[type].header}均价`"
          :prop="detailType[type].avg_money"
        ></el-table-column>
        <el-table-column
          :label="`${detailType[type].header}金额`"
          :prop="detailType[type].money"
        ></el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
import { stockLogDetail } from "@/api/report/inventory";
import { packApi } from "@/utils/public";
export default {
  data() {
    return {
      drawer: false, // 抽屉状态
      list: [], // 列表
      loadingDialig: false, // loading
      detailType: {
        1: {
          title: "入库明细",
          header: "入库",
          num: "storage_num",
          money: "storage_money",
          avg_money: "storage_avg_money",
        },
        2: {
          title: "出库明细",
          header: "出库",
          num: "stock_out_num",
          money: "stock_out_money",
          avg_money: "stock_avg_out_money",
        },
        5: {
          title: "报溢明细",
          header: "报溢",
          num: "storage_num",
          money: "storage_money",
          avg_money: "storage_avg_money",
        },
        12: {
          title: "报损明细",
          header: "报损",
          num: "stock_out_num",
          money: "stock_out_money",
          avg_money: "stock_avg_out_money",
        },
      }, // 根据type获取对应的属性
      type: 1, // 类型
    };
  },
  methods: {
    // 打开抽屉
    open(data) {
      this.list = [];
      // 如果query_type有值才赋值
      if (data.query_type) this.type = data.query_type;
      this.drawer = true;
      this.loadingDialig = true;
      stockLogDetail(packApi(data)).then((res) => {
        this.list = res.data.list;
        this.loadingDialig = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-drawer__body {
  padding: 0 30px;
  box-sizing: border-box;
}
</style>